<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="./header.css">
    <link rel="stylesheet" href="./main.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            width: 100%;

        }

        body {
            background-color: #F5F5F5;
        }

        a {
            text-decoration: none;
        }


        footer {
            position: relative;
            bottom: 0;
            height: 325px;
            border-top: 1px solid #d3d3d3;
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <header>
        <div class="head-top">
            <div class="head-top-main">
                <div class="logo"></div>
                <ul class="nav">
                    <li>发现音乐</li>
                    <li>我的音乐</li>
                    <li>关注</li>
                    <li>商城</li>
                    <li>音乐人</li>
                    <li>云推歌</li>
                    <li>下载客户端</li>
                </ul>
            </div>
        </div>
        <div class="head-bottom"></div>
    </header>

    <main>
        <div class="slider"></div>
        <div class="body-div">
            <div class="body-left">
                <div channels>
                    <div class="hot-channel">
                        <div class="hot-head">
                            <div class="hot-title">
                                热门推荐
                            </div>
                            <div class="hot-list">
                                <ul>
                                    <li class="channel">华语</li>
                                    <li class="channel">流行</li>
                                    <li class="channel">摇滚</li>
                                    <li class="channel">民谣</li>
                                    <li class="channel last">电子</li>
                                </ul>
                            </div>
                            <div class="more">
                                <div class="more-text">更多</div>
                            </div>
                        </div>
                        <div class="hot-body">
                            <ul>
                                <script>
                                    const data = [
                                        {
                                            img: 'https://p1.music.126.net/sOWvFHC7alSUXHxmsTr1bQ==/109951163610820733.jpg?param=140y140',
                                            title: '戳爷/黄老板/断眉/萌德/骚姆/比伯/烟卷',
                                            play: '4448万'
                                        },
                                        {
                                            img: 'https://p1.music.126.net/pa1t9G_Mt2xJm_xqUUjvIw==/109951163676905233.jpg?param=140y140',
                                            title: '歌词唱透了心声，回忆模糊了眼眸',
                                            play: '7094万'
                                        }, {
                                            img: 'https://p1.music.126.net/TIIBNztL_pmitO7cbGunvg==/18519074348678474.jpg?param=140y140',
                                            title: '无前奏丨欧美女声丨三秒爱上',
                                            play: '4995万'
                                        }, {
                                            img: 'https://p1.music.126.net/RPhqrfbD1f3eSGB7DkNKHQ==/109951169504477798.jpg?param=140y140',
                                            title: 'Vol.06 进入藏区200余次，在无人区独自面对狼群与盗猎...',
                                            play: '4448万'
                                        }, {
                                            img: 'https://p1.music.126.net/zy9V0r9ghiOQ6XIRL6zatg==/109951169170442237.jpg?param=140y140',
                                            title: '伤感说唱 | 不要再为他鼻酸了',
                                            play: '4448万'
                                        }, {
                                            img: 'https://p1.music.126.net/6yKVpPA-uif54t1w_37YOA==/109951169476192289.jpg?param=140y140',
                                            title: '004 《Right here waiting》打个电话就有老婆了！',
                                            play: '4448万'
                                        }, {
                                            img: 'https://p1.music.126.net/JKiCDG-xfj203gcui2z6aA==/109951163139073602.jpg?param=140y140',
                                            title: '【R&B】慵懒的感觉非常舒服',
                                            play: '4448万'
                                        }, {
                                            img: 'https://p1.music.126.net/Tie1DId0HO_I_u36Acc9wg==/109951169337715866.jpg?param=140y140',
                                            title: '上春山- 魏大勋魏晨',
                                            play: '4448万'
                                        }
                                    ]
                                    for (let i = 0; i < data.length; i++) {
                                        document.write(`
                                        <li class='hot-music'>
                                            <div class='hot-music-img'>
                                            <img src="${data[i].img}" alt=''>    
                                            </div>

                                            <div class='hot-music-text'>
                                            ${data[i].title}
                                            </div>
                                        </li>
                                        `)
                                    }
                                </script>
                                <li class="clear"></li>
                            </ul>
                        </div>
                    </div>
                    <div class="new-channel">
                        <div class="new-head">
                            <div class="new-title">
                                新碟上架
                            </div>
                            <div class="more">
                                <div class="more-text">更多</div>
                            </div>
                        </div>
                    </div>
                    <div class="rank-channel">
                        <div class="rank-head">
                            <div class="rank-title">
                                榜单
                            </div>
                            <div class="more">
                                <div class="more-text">更多</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="body-right"></div>
        </div>
    </main>

    <footer>
    </footer>
</body>

</html>